<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>FusionWidgets XT - Edit Mode</title>
<script type="text/javascript" src="../../Charts/FusionCharts.js"></script>
		<script type="text/javascript" language="Javascript" src="../assets/ui/js/jquery.min.js"></script>
		<script type="text/javascript" language="Javascript" src="../assets/ui/js/lib.js"></script>

        <link href="../assets/ui/css/style.css" rel="stylesheet" type="text/css" />

        <!--[if IE 6]>
        <script type="text/javascript" src="../assets/ui/js/DD_belatedPNG_0.0.8a-min.js"></script>

		<script>
          /* select the element name, css selector, background etc */
          DD_belatedPNG.fix('img');

          /* string argument can be any CSS selector */
        </script>
        <![endif]-->
		
		<style type="text/css">
            h2.headline {
                font: normal 110%/137.5% "Trebuchet MS", Arial, Helvetica, sans-serif;
                padding: 0;
                margin: 25px 0 25px 0;
                color: #7d7c8b;
                text-align: center;
            }
            p.small {
                font: normal 68.75%/150% Verdana, Geneva, sans-serif;
                color: #919191;
                padding: 0;
                margin: 0 auto;
                width: 664px;
                text-align: center;
            }
        </style>
		
		</head>

<body>
<div id="wrapper">

            <div id="header">
                

               <div class="logo"><a class="imagelink"  href="http://www.fusioncharts.com/widgets" target="_blank"><img src="../assets/ui/images/fwxt-logo.png" width="73" height="74" alt="FusionWidgets XT logo" /></a></div>
				 <h1 class="brand-name">FusionWidgets XT</h1>
				 <h1 class="logo-text">First Real-time Angular gauge</h1>
            </div>
			<div class="content-area">
                <div id="content-area-inner-main">
				<p class="text" align="center"> The sample below displays a real-time angular gauge. The data gets updated every 3 secs.</p>
				<div id="messageBox" style="margin-left:130px; margin-right:130px; display:none;"></div>
					<p>&nbsp;</p>

                    <div class="gen-chart-render">

                        <div id="chartContainer">FusionWidgets XT will load here!</div>
                        <script type="text/javascript">
   var chart1 = new FusionCharts("../../Charts/AngularGauge.swf", "ChId1", "400", "200", "0", "0");
   chart1.setXMLData('<chart lowerLimit="0" upperLimit="100" gaugeStartAngle="180" gaugeEndAngle="0" palette="1" numberSuffix="%" tickValueDistance="20" showValue="1" decimals="0" dataStreamURL="CPUData.asp" refreshInterval="3">\n\
   <colorRange>\n\
      <color minValue="0" maxValue="75" code="FF654F"/>\n\
      <color minValue="75" maxValue="90" code="F6BD0F"/>\n\
      <color minValue="90" maxValue="100" code="8BBA00"/>\n\
   </colorRange>\n\
   <dials>\n\
      <dial id="CPU1" value="92" rearExtension="10" toolText="CPU 1 Usage"/>\n\
   </dials>\n\
   <styles>\n\
      <definition>\n\
         <style type="font" name="myValueFont" bgColor="F1f1f1" borderColor="999999" />\n\
      </definition>\n\
      <application>\n\
         <apply toObject="Value" styles="myValueFont" />\n\
      </application>\n\
   </styles>\n\
</chart>');
   chart1.render("chartContainer");
   
   window.dataUpdateTimer = null;
			
	FusionCharts.addEventListener("Rendered", function(e,a) {
		if(e.sender.id=="tmpChartId") return;
		window.dataUpdateTimer = window.setInterval (function (){ 
			var updater= e.sender.setData? e.sender : null;
			
			if(updater) updater.setData(1,Math.random()*30+70);
		},3000 );
	});
			
</script>
<div class="clear"></div>
                    <p>&nbsp;</p>
                    <p class="small">    </p>
                    <div class="underline-dull"></div>
                </div>
            </div>
			</div>
			<div id="footer">
                <p class="highlightBlock">The above sample showcases a real-time Angular Gauge. Click <a href="../../Contents/Index.html?Angular/RealTime.html" target="_blank">here</a> to know more on how the code of this example works.</p>
            </div>
        </div>

<script type="text/javascript"><!--//
			$(document).ready ( function() {
			   showConditionalMessage( "Your browser does not seem to have Flash Player support. JavaScript chart is rendered instead.", isJSRenderer(chart1) );
			});	
		// -->
		</script>
</body>
</html>